import React, { useState } from "react";
import { Switch } from 'antd-mobile';
import { connect } from 'react-redux'; 
import { actionCreators } from './store';
import './index.less';
import intl from 'react-intl-universal'; 
function Home(props) { 
	const [typeValue, setTypeValue] = useState(false);
	const onChange = (value) => {
		props.changeHomeData();
		setTypeValue(value);  
		// 主要通过切换body的class来切换css变量 
		let body = document.getElementsByTagName('body')[0];
		if (value) {
			body.className = 'light-theme';
		} else {
			body.className = 'dark-theme';
		}
	}
	return (
		<div>
			<h3>{intl.get('title.home_title')}</h3>
			<Switch
				checked={typeValue}
				onChange={onChange}
			/>
			<h3>{props.dataValue}</h3>
		</div>
	) 
}
const mapState = (state) => ({
	dataValue: state.getIn(['home', 'dataValue'])
})

const mapDispatch = (dispatch) => ({
	changeHomeData() {
		dispatch(actionCreators.getHomeInfo());
	} 
});
export default connect(mapState, mapDispatch)(Home);
